<style scoped>
@import url(./css/percentBar.css);
.title{
    display: flex;
    justify-content: space-between;
    font-size: 1.5vh;
    line-height: 1.5vh;
    color: #fff;
    margin-bottom: 1.4vh;
}
.title .num{
    color: #FFAC36;
}
.bar_con{
    position: relative;
    height: 1.1vh;
}
.bar_bg,.bar_percent{
    height: 100%;
    border-radius: .65vh;
}
.bar_bg{
    background: #153986;
}
.bar_percent{
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(-90deg,rgba(86,217,255,1) 0%,rgba(23,99,255,1) 100%);
}
.bar_point{
    width:1.7vh;
    height:1.7vh;
    background:rgba(35,170,255,1);
    border-radius:50%;
    position: absolute;
    top: -0.3vh;
    left: 0;
}
.rect .title{

}
.rect .num{
    color: #fff;
    font-size: 1.9vh;
    /* font-weight: bold; */
}
.rect .bar_con{
    padding: .2vh;
    height: 2.2vh;
    border: 1px solid #84CCC9;
}
.rect .bar_bg{
    display: none;
}
.rect .bar_bg,.rect .bar_percent{
    border-radius: 0;
    height:100%;
    overflow:hidden;
    background: none;
}
.rect .bar_percent{
    position: relative;
}
.rect i{
  display: inline-block;
  width: .8vw;
  height: 100%;
  vertical-align: top;
  margin-right: 1px;
}

</style>
<template>
  <div ref="percentBar"  :class="barClasses">
      <p class="title" v-if="showName">
          <span>{{ data.name }}</span>
          <span class="num">{{ percent }}<i class="unit">{{ data.unit||'' }}</i></span>
      </p>
      <div class="bar_con">
          <div v-if="barType == 'round'">
              <div class="bar_percent" :style="{width: percent+'%',background:config&&config.barColor||'#38D7FF'}"></div>
            <div class="bar_point" :style="{left: (percent==0?0:'calc('+this.percent+'% - 1.7vh)')}"></div>
          </div>
          <div v-else-if="barType == 'rect'" class="bar_percent rect" :style="{width: percent+'%',}">
              <div style="width:120%;height:100%;">
                <i v-for="(item,i) in barRectBarItems" :key="i" :style="{backgroundColor: config&&config.barColor||'#38D7FF'}" ></i>
              </div>
          </div>
      </div>
      <template v-if="barType == 'bar'">
           <div  class="line_box"  v-for="(item,i) in data" :key="i">
               <template v-if="config.namePosition == 'left'">
                <div class="line_cont_box_left">
                <div class="line_name_left" v-if="config.showBarName"> <div class="xh">{{i>9?i:'0'+(i+1)}}</div>{{item.name}}</div> 
                <div  class="lines_box_left">
                <div  class="line_left" style="width: 33.33%; background: rgb(255, 129, 38);"></div>
                </div>
                <div class="line_num_left" v-if="config.showBarName" >{{item.value}}{{item.unit}}</div>
              </div>  
               </template>
               <template v-else>
                <div class="line_name" v-if="config.showBarName"> <div class="xh">{{i>9?i:'0'+(i+1)}}</div>{{item.name}}</div> 
               <div class="line_cont_box">
                <div  class="lines_box">
                <div  class="line" style="width: 33.33%; background: rgb(255, 129, 38);"></div>
                </div>
                <div class="line_num" v-if="config.showBarName" >{{item.value}}{{item.unit}}</div>
              </div>
               </template>
           </div>
      </template>
       <template v-if="barType == 'pictorialBar'">
           <div  class="line_box pictorialBar"  v-for="(item,i) in data" :key="i">
              <div class="line_name" v-if="config.showBarName"> <div class="xh">{{i>9?i:'0'+(i+1)}}</div>{{item.name}}</div> 
              <div class="line_cont_box">
                <div class="pictorialBar_box"><avue-echart-pictorialBar :data="item"></avue-echart-pictorialBar></div>
                <div class="line_num" v-if="config.showBarName" >{{item.value}}{{item.unit}}</div>
              </div>
           </div>
      </template>
  </div>
</template>
<script>
import {formatPercent} from './lib/common.js'
export default {
    name:'PercentBar',
    props:{
        data:{
            type: Object|Number
        },
        barClass:{
            type: Array|String,
            default:()=>{
                return '';
            }
        },
        config: Object
    },
    data(){
        return {
            showName:false,
            pointLeft:''
        }
    },
    computed:{
        barClasses(){
            if(typeof this.barClass == 'string'){
                return (this.barType == 'rect'?'rect':'') +' ' + this.barClass 
            }
            return this.barClass.join(' ')+' ' + (this.barType == 'rect'?'rect':'')
        },
        barType(){
            return (this.config&&this.config.barType) || 'round'
        },
        percent(){
            if(typeof this.data-0 == 'number'){
                return formatPercent(this.data)
            }else{
                this.showName = true;
                return formatPercent(this.data.value)
            }
        },
        barRectBarItems(){
            return (new Array(50)).fill(1)
        }
        // pointLeft(){
        //     if(this.percent == 0){
        //         return 0;
        //     }else{
        //         return 'calc('+this.percent+'% - 1.7vh)'
        //     }
            
        // }
    },
}
</script>